<template>
  <div id="app" class="skLifeWater">
    <!-- 喝水 -->
    <sk-life-template v-bind="$attrs" v-on="$listeners"  :cardTitle="cardTitle2" @className="getClassName"  :classCount="classCount">
      <template slot="centerData" >
        <a-spin  :spinning="loading"></a-spin>
        <line-chart :width="'100%'" :height="'400px'" :seriesName="`平均${cardTitle}次数`" :unit="'次'" :data="lineData" v-bind="$attrs" :color="['#1890FF','#1890FF']" ></line-chart>
      </template>
      <template slot="centerViewBtn">
        <a-button size="small" type="primary" @click="hendleDetail">
          <span>查看详情</span>
          <a-icon type="caret-right" />
        </a-button>
      </template>
      <template slot="rightViewBtn">
        <a-button  size="small" type="primary" @click="hendleDetail(0)">
          <span>查看本月</span>
          <a-icon type="caret-right" />
        </a-button>
      </template>
      <template slot="rightData">
        <a-table :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          rowKey="num"
          :loading="loading"
          :scroll="{y:370,x:200}"
        >
        <!-- <span slot="action" slot-scope="text, record">
          <a @click="hendleDetail(1,record)"> 查看 </a>
        </span> -->
        </a-table>
      </template>
    </sk-life-template>
  </div>
</template>
<script>
import skLifeTemplate from "@/components/skComponent/ClassCard.vue";
import LineChart from "@/components/Echarts/line";
import {filterDictTextByCache} from '@/components/dict/JDictSelectUtil'
export default {
  name: 'skLifeWater',
  data() {
    return {
      loading:true,
      dataSource:[],
      lineData:[],
      columns:[],
      allClass:[
        {
          title:'日期',
          align:"center",
          dataIndex: 'weekDate'
        },
        {
          title:'年级',
          align:"center",
          dataIndex: 'classType',
          customRender:function(text){
            return filterDictTextByCache("class_type",text)
          }
        },
        {
          title:'班级',
          align:"center",
          dataIndex: 'className',
        },
        {
          title:'总次数(次)',
          align:"center",
          dataIndex: 'count'
        },
      ],
      class:[
        {
          title:'日期',
          align:"center",
          dataIndex: 'weekDate'
        },
        {
          title:'姓名',
          align:"center",
          dataIndex: 'stuName',
        },
        {
          title:'班级',
          align:"center",
          dataIndex: 'className',
        },
        {
          title:'总次数(次)',
          align:"center",
          dataIndex: 'count'
        },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align:"center",
        //   fixed:"right",
        //   width:147,
        //   scopedSlots: { customRender: 'action' }
        // }
      ],
      resultData:null,
      classCount:[],
      classId:"0"
    }
  },
  props:{
    cardTitle:String,
    result:{
      type:Object,
      default:()=>{}
    }
  },
  watch:{
    result:{
      handler(newVal){
        this.resultData = newVal;
        this.getData();
        this.loading = false;
      },
      deep:true
    }
  },
  components: {
    skLifeTemplate,
    LineChart
  },
  computed: {
    cardTitle2(){
      let title = "";
      if (this.cardTitle == '喝水') {
        title = "人均喝水次数(次)"
      }else{
        title = "人均如厕次数(次)"
      }
      return title;
    }
  },

  created() {
  },
  methods: {
    // 获取每个班级的数据
    getClassName(data){
      if (data.classId) {
        this.classId = data.classId
        this.resultData.classDetails.map(item=>{
          if (item.classId == data.classId) {
            this.dataSource = item.studentDetails;
            this.dataSource.map((obj,index)=>{
              obj.num = index;
              obj.weekDate = this.$skCommon.getWeekDate();
              obj.className = item.className;
            })
            this.lineData = this.getLineData(item.detail);
          }
        })
        this.columns = this.class;
      }else{
        this.classId = "0"
        this.getData();
      }
    },
    // 获取全园的数据
    getData(){
      this.classCount.push(
        {className:"全园",count:this.$skCommon.transformNum(this.resultData.averageCount)}
      )
      this.lineData = this.getLineData(this.resultData.detail);
      this.dataSource = this.resultData.classDetails;
      this.dataSource.map((item,index)=>{
        item.num = index;
        item.weekDate = this.$skCommon.getWeekDate();
        this.classCount.push(
          {className:item.className,count:this.$skCommon.transformNum(item.averageCount)}
        )
      })
      this.columns = this.allClass
    },
    // 获取折线图的数据
    getLineData(obj){
      let arr = [];
      for (const key in obj) {
        arr.push(this.$skCommon.transformNum(obj[key]))
      }
      return arr;
    },
    // 查看详情
    hendleDetail(status,record){
      let data = {
        classId:this.classId,
        detailName:this.cardTitle,
        dateType:"week",
        show:false
      }
      if (!status) {
        data.dateType = "month";
      }
      this.$emit("lifeData",data);
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
